<template>
  <div class="container">
    <div class="picture">
      <!-- <img src="../assets/picture.png" /> -->
      <img src="@/assets/picture.png">
    </div>
    <div  class="buttonGroup">
      <div>
        <div  @click="aaa" class="button"><span>教学资源</span></div>
        <div @click="bbb" class="button"><span>行业资源</span></div>
      </div>
    </div>
    <div v-if="resources" class="resourcePackage">
      <div class="packages">
        <div v-for="(itme, index) in packages" :key="index" class="package">
          <div class="title">
            <div class="icon">
              <img src="@/assets/img.png" />
            </div>
            <div>
              <span>
                {{ itme.title }}
              </span>
            </div>
          </div>
          <div class="button">
            <div class="download">{{ itme.download }}</div>
          </div>
          <div class="pwd">
            <span>密码：{{ itme.pwd }}</span>
          </div>
        </div>
      </div>
      <div class="end">
        <div class="endBox">
          <div class="imgs"><img src="@/assets/line.png"></div>
          <div class="text"><span>THE END</span></div>
          <div class="imgs"><img src="@/assets/line.png"></div>
        </div>
      </div>
    </div>
    <div v-if="information">行业资讯</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resources: true,
      information: false,
      packages: [
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
        {
          title:
            "附件：免费学习资源电子教程、考纲、真题样题等（大数据应用开发）.docx",
          icon: "../assets/W.png",
          download: "下载资源",
          pwd: "1234",
        },
      ],
    };
  },
  methods: {
    aaa() {
      (this.resources = true), (this.information = false);
    },
    bbb() {
      (this.resources = false), (this.information = true);
    },
  },
};
</script>

<style>
.container {
  width: 1920px;
  height: auto;

  /* margin: 0px;
  padding: 0px; */
  margin: 0 auto;
  overflow: hidden;
}
.picture {
  width: 100%;
  height: 420px;
  margin: 0 auto;
}
.picture img {
  width: 100%;
  height: 100%;
}
.buttonGroup {
  width: 100%;
  height: 60px;
  border-bottom: #eeeeee 1px solid;
  margin: 0 auto;
  overflow: hidden;
}
.buttonGroup > div {
  display: flex;
  width: 360px;
  height: 100%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  /* background-color: chartreuse; */

  
}
.button {
  flex: 1;
  line-height: 60px;
  font-size: 18px;
  color: #666666; 
  text-align: center;
  
}
.button:active {
  background-color: #f2f2f2;
  color: #2e71fe;
  
}
.resourcePackage {
  width: 1200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  overflow: hidden;
}
.resourcePackage .packages {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: hidden;
}
.package {
  width: 360px;
  height: 204px;
  border: #eeeeee 2px solid;
  border-radius: 5px;
  margin-bottom: 40px;
  overflow: hidden;
}
.package .title {
  width: 90%;
  height: auto;
  margin-top: 40px;
  display: flex;
  font-size: 16px;
  color: #000000;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
.icon img {
  width: 100%;
  height: 100%;
}
.package .button {
  width: 100%;
  height: 40px;
  margin-top: 40px;
}
.download {
  width: 140px;
  height: 40px;
  background-color: #2e71fe;
  border-radius: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #ffffff;
}
.package .pwd {
  width: 100%;
  height: 15px;
  margin-top: 10px;
  font-size: 10px;
  color: #666666;
  line-height: 15px;
  text-align: center;
}
.end {
  width: 100%;
  height: 20px;
  /* margin-top: 50px; */
  margin-bottom: 60px;
}
.endBox {
  width: 40%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
}
.endBox .imgs {
  width: 30%;
  height: 100%;
}
.endBox .imgs img {
  width: 100%;
  width: 100%;
}
.endBox .text {
  width: 30%;
  height: 100%;
  line-height: 20px;
  font-size: 16px;
  color: #999999;
  text-align: center;
}
</style>